// src/app/workspace/[workspaceId]/member/[memberId]/components/header.tsx
import React, {useEffect, useState} from 'react';
import {Button} from "@/components/ui/button";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {FaChevronDown} from "react-icons/fa";

interface Props {
    memberName?: string;
    memberImage?: string
    onClick: () => void
}

const Header = ({
                    memberName = 'Member',
                    memberImage,
                    onClick
                }: Props) => {
    const avatarFallback = memberName?.charAt(0).toUpperCase()

    return (
        <div className={`bg-white border-b h-[49px] flex items-center px-4 overflow-hidden`}>
            <Button
                variant={'ghost'}
                className={`text-lg font-semibold px-2 overflow-hidden w-auto`}
                size={'sm'}
                onClick={onClick}
            >
                <Avatar className={`size-6 mr-2`}>
                    <AvatarImage src={memberImage}/>
                    <AvatarFallback>
                        {avatarFallback}
                    </AvatarFallback>
                </Avatar>
                <span className={`truncate`}>{memberName}</span>
                <FaChevronDown className={`size-2.5 ml-2`}/>
            </Button>
        </div>
    );
};

export default Header;